<template>
  <div class="dock">
    <icon svg="/_nuxt/img/icon-apple.85cd212.svg" title="桌面" />
    <icon svg="/_nuxt/img/icon-blog.da3b442.svg" title="博客" />
  </div>
</template>

<script>
import icon from '../icon'
export default {
  components: {
    icon
  },
  methods: {
    getDockWidth() {
      const dock = document.querySelector('.dock');
      const icons = dock.querySelectorAll('.icon');
      return (icons[0].offsetWidth + 10) * icons.length + 20
    }
  },
  mounted() {
    document.querySelector('.dock').style.width = this.getDockWidth() + 'px';
    
  }
}
</script>

<style lang="scss" scoped>
  .dock{
    border-radius: 6px 6px 0 0;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
    height: 80px;
    background: rgba(140, 162, 189, 0.85);
    text-align: center;
    .icon{
      margin: 10px;
    }
  }
</style>
